<template>
  <div>
    <el-button type="primary" icon="plus" @click="addOrUpdate(1)">新增</el-button>
    <el-button type="danger" icon="delete" @click="onBatchRemoveRole">删除</el-button>
  </div>
  <el-table :data="tableData" stripe border>
    <el-table-column width="40">
      <template #header>
        <el-checkbox />
      </template>
      <template #default="{ row }">
        <el-checkbox v-model="row.checked" />
      </template>
    </el-table-column>
    <el-table-column
        prop="username"
        label="用户名称"
        align="center"    
    ></el-table-column>
    <el-table-column
        prop="realName"
        label="真实姓名"
        align="center"    
    ></el-table-column>
    <el-table-column
        prop="userType"
        label="用户类型"
        align="center"    
    ></el-table-column>
    <el-table-column
        prop="phone"
        label="手机号码"
        align="center"    
    ></el-table-column>
    <el-table-column
        prop="gender"
        label="用户性别"
        align="center"    
    ></el-table-column>
    <el-table-column
        prop="enabled"
        label="账号状态"
        align="center"    
    ></el-table-column>
    <el-table-column align="center">
      <template #header>
        操作
      </template>
      <template #default="{row}">
        <el-button size="small" @click="addOrUpdate(2,row)">
          修改
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 新增和修改弹窗组件 -->
  <UserEditorDialog
    v-if="editorDialog.show"
    v-model:show="editorDialog.show"
    :id="editorDialog.id"
    :type="editorDialog.type"
    @change="init"
    ></UserEditorDialog>
</template>
<script setup>
import { onBeforeMount, reactive, ref } from "vue";
// api
import { userPage } from "./api/user";
// dialog
import UserEditorDialog from "./UserEditorDialog.vue";
//分页数据
const pages = reactive({
  current: 1, //当前页
  size: 10, //分页大小
  total: 0, //总条数
});
const tableData = ref([]); 
onBeforeMount(() => {
  init();
});
const init = async () => {
  let res = await userPage({ current: pages.current, size: pages.size });
  tableData.value = res.data.records;
};

/* 新增、修改弹窗 */
const editorDialog = reactive({ show: false})
const addOrUpdate = (type,row) => {
  if(editorDialog.show) return
  Object.assign(editorDialog, {
    show: true,
    id: row ? row.id : '',
    type
  });
}
// 删除
const onBatchRemoveRole =  () => {}
</script>
